<template>
  <nav class="h-20 bg-white shadow-sm fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-8">
    <div class="flex items-center gap-8">
      <!-- EduLiveLink Logo -->
      <div class="flex items-center gap-4 bg-slate-800 px-5 py-3 rounded-lg">
        <div class="logo-icon w-12 h-12">
          <svg viewBox="0 0 100 100" fill="none">
            <circle cx="50" cy="50" r="45" stroke="url(#gradient1)" stroke-width="3" fill="none"/>
            <circle cx="50" cy="50" r="35" stroke="url(#gradient2)" stroke-width="2" fill="none"/>
            <path d="M30 40 L50 30 L70 40 L70 60 L50 70 L30 60 Z" fill="url(#gradient3)" opacity="0.8"/>
            <circle cx="50" cy="50" r="8" fill="white"/>
            <defs>
              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#4A90E2"/>
                <stop offset="100%" style="stop-color:#7BB3F0"/>
              </linearGradient>
              <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#5BA0F2"/>
                <stop offset="100%" style="stop-color:#8CC8FF"/>
              </linearGradient>
              <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#4A90E2"/>
                <stop offset="100%" style="stop-color:#6BB0FF"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="flex flex-col">
          <span class="text-xl font-bold text-blue-600">
            EduLiveLink教师端
          </span>
          <span class="text-xs text-black">
            智能教育平台
          </span>
        </div>
      </div>
      
      <div class="flex gap-8">
        <router-link to="/" class="text-blue-600 font-semibold text-base">首页</router-link>
        <router-link to="/courses" class="text-gray-600 hover:text-blue-600 transition-colors text-base font-medium">我的课程</router-link>
        <router-link to="/student-classes" class="text-gray-600 hover:text-blue-600 transition-colors text-base font-medium">我的班级</router-link>
      </div>
    </div>
    <div class="flex items-center gap-4">
      <el-input
        v-model="searchText"
        placeholder="搜索课程"
        class="w-48"
        :prefix-icon="Search"
        size="small"
      />
      <el-button type="primary" size="default" class="rounded px-6 font-medium" @click="startLearning">开始讲课</el-button>
      <el-button type="info" size="default" class="rounded px-6 font-medium" @click="goToProfile">我的</el-button>
    </div>
  </nav>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchText = ref('')

// 用户信息（模拟数据）
const userInfo = reactive({
  nickname: '张三',
  username: 'zhangsan123',
  realName: '张三'
})

const startLearning = () => {
  router.push('/study')
}

const goToProfile = () => {
  router.push('/profile')
}
</script>

<style scoped>
.router-link-active {
  color: #2563eb;
  font-weight: 600;
}
</style>
